// 1. 动态拼接swiper轮播图
$(function () {
  let imgList = ['./img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg', './img/5.jpg']
  // 1-1 遍历图片地址数组
  imgList.forEach((item) => {
    // 组装一个div元素
    let div = $(`<div class="swiper-slide">
      <img src="${item}" class="img" />
    </div>`)
    // 动态拼接到swiper-wrapper中
    $('.swiper-wrapper').append(div)
  })
  // 1-2 初始化轮播图对象
  let swiper = new Swiper('.swiper', {
    // 水平切换选项
    direction: 'horizontal',
    // 循环模式选项
    loop: true,
    // 自动播放
    autoplay: { delay: 3000, stopOnLastSlide: false, disableOnInteraction: true },
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
  })
})

// 2. 动态拼接楼层数据
$(function () {
  // 2-1 请求楼层数据的函数
  function getFloors() {
    return new Promise((v) => {
      $.get('https://web17.oss-cn-hangzhou.aliyuncs.com/floors.json', function (res) {
        v(res)
      })
    })
  }
  // 2-2 渲染楼层数据的函数
  function renderFloor(list) {
    // 判断list是否合法
    if (!list || !Array.isArray(list)) {
      return
    }
    // 遍历数组
    list.forEach((el, i) => {
      let ul = $(`<ul class="${'floor_' + (i + 1)}"></ul>`)
      el.forEach((item, index) => {
        let li = $(`<li class="${'li_' + (index + 1)}"> <a href="javascript:void(0)"><span>${item}</span></a> </li>`)
        ul.append(li)
      })
      $('.floor').append(ul)
    })
  }

  // 2-3 借助初始化函数
  ;(async () => {
    try {
      let res = await getFloors()
      renderFloor(res.list)
    } catch (error) {}
  })()
})
